<template>
    <div class="header-bar">
        <div class="title-center">
            <image :src="searchIcon" resize="cover" class="search-icon"></image>

            <input @input="goToSearch" return-key-type="search" v-model="searchValue" type="text" class="title-input font-msyhl" placeholder="请输入小区" />
        </div>

        <text class="header-txt" @click="goToSearch">搜索</text>
    </div>
</template>

<style scoped>
    .header-bar {
        width: 1080px;
        height: 60px;
        padding-left: 30px;
        padding-right: 30px;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        background-color: transparent;
    }
    .title-center {
        flex: 1;
        flex-direction: row;
        align-items:center;
        height: 60px;
        border-radius: 100px;
        background-color: #f1f1f1;
    }
    .search-icon{
        width:50px;
        height: 50px;
        margin-left: 21px;
        margin-right: 10px;
    }
    .title-input {
        flex: 1;
        font-size: 30px;
        color: #313131;
        placeholder-color: #8d8d8d;
        background-color: transparent;
        height: 60px;
        line-height: 60px;
    }
    .header-txt {
        padding-left: 20px;
        padding-right: 10px;
        font-size: 30px;
        color: #313131;
        font-family: msyhl;
    }
</style>

<script>
    import searchIcon from 'assets/images/search-ico-black.png';
    import modal from 'utils/modal';
    import navigator from 'utils/navigator';
    import constant from 'constants/constant';

    export default{
        data(){
            return{
                searchIcon: searchIcon,
                searchValue: ""
            }
        },
        methods: {
            goToSearch(){
                if(!this.searchValue){
                    modal.toast("请输入搜素关键字");
                    return false;
                }
                this.$emit("search",this.searchValue);
            }
        }
    }
</script>
